<template>
  <div id="home">
    <nav-bar text-color="#fff" bg-color="#ff8198">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control class="topTabControl" :current-type="currentType" :titles="tabTitles"
                 @tabControlItemClick="tabControlItemClick"
                 v-show="showTopTab"/>
    <b-scroll ref="bScroll" :b-scroll-object="bScrollObject" @scrollMonitor="scrollMonitor"
              @pullingUp="loadMore">
      <HomeSwiper :banner="banner"/>
      <home-recommend :recommend="recommend"/>
      <popular-week/>
      <tab-control ref="tabControl" :current-type="currentType" :titles="tabTitles"
                   @tabControlItemClick="tabControlItemClick"/>
      <goods-list :goods-list="showGoodsList"/>
    </b-scroll>
  </div>
</template>

<script>
import NavBar from "@/components/component/navBar/NavBar";
import BScroll from '@/components/component/bScroll/BScroll.vue';

import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";

import HomeSwiper from "./childComponent/HomeSwiper";
import HomeRecommend from "./childComponent/HomeRecommend";
import PopularWeek from "./childComponent/HomePopularWeek";

import * as Request from "@/network/home";
import * as Constant from "@/common/constant";
import {BScrollClass} from "@/common/constant";

export default {
  name: "Home",
  data() {
    return {
      bScrollObject: new BScrollClass().setExcessHeight(93).setProbeType(3).setPullUpLoad(500),
      banner: [],
      recommend: [],
      tabTitles: [
        {type: Constant.POP, title: '流行'},
        {type: Constant.NEW, title: '新款'},
        {type: Constant.SELL, title: '精选'}
      ],
      currentType: Constant.POP,
      goodsList: {
        'pop': {'page': 1, 'list': []},
        'new': {'page': 1, 'list': []},
        'sell': {'page': 1, 'list': []}
      },
      showTopTab: false,
      saveY: 0
    }
  },
  created() {
    this.getHomeMultiData();
    this.getProductData(Constant.POP);
  },
  activated() {
    this.$refs.bScroll.refresh();
    this.$refs.bScroll.scrollTo(0, this.saveY);
  },
  deactivated() {
    this.saveY = this.$refs.bScroll.getScrollY();
  },
  components: {
    NavBar,
    BScroll,
    TabControl,
    GoodsList,
    HomeSwiper,
    HomeRecommend,
    PopularWeek
  },
  computed: {
    showGoodsList() {
      return this.goodsList[this.currentType].list
    }
  },
  methods: {
    getHomeMultiData() {
      Request.getHomeMultiData().then(res => {
        this.banner = res.data.banner.list;
        this.recommend = res.data.recommend.list;
      });
    },
    getProductData(type, callback) {
      Request.getProductData(type, this.goodsList[type].page).then(res => {
        this.goodsList[type].list.push(...res.data.list);
        this.goodsList[type].page++;
        if (typeof callback === 'function') {
          callback();
        }
      });
    },
    scrollMonitor(position) {
      this.showTopTab = (Math.abs(position.y) > Math.abs(this.$refs.tabControl.$el.offsetTop));
    },
    tabControlItemClick(type) {
      this.currentType = type;
      this.getProductData(this.currentType);
      this.$refs.bScroll.scrollToElement(this.$refs.tabControl.$el);
    },
    loadMore(callback) {
      this.getProductData(this.currentType, callback);
    }
  }
}
</script>

<style scoped>
#home {
  height: 100vh;
}

.topTabControl {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 10;
}
</style>
